Tenemos dos maneras para simular que el ratón pasa por encima de un elemento:
- hover de css
- eventos de JavaScript
Normalmente solo funcionará uno de los dos metodos, dependiendo de si el elemento ha sido programado con css o con un evento de JavaScript
Hover de css
Una vez dentro del inspector seleccionamos el elemento en el código, abrimos el menu :hov y seleccionamos :hover
Tambien podemos probar a seleccionar otros eventos como :focus si vemos que :hover no funciona
Eventos de JavaScript
Para simular eventos del raton con JavaScript lo hacemos de la siguiente manera:
En el código hacemos click derecho sobre el elemento sobre el que queremos simular el raton, y hacemos click en Copy > Copy JS path
Ahora esto lo pegamos en la propia consola del inspector (esto nos permitirá obtener el elemento a nivel JavaScript)
Y a mayores añadimos una de las siguientes lineas:
.dispatchEvent(new MouseEvent('mouseenter', { 'bubbles': true }));
.dispatchEvent(new MouseEvent('mouseover', { 'bubbles': true }));
.dispatchEvent(new MouseEvent('click', { 'bubbles': true }));
De manera que nos quedará una linea como la siguiente:
Le damos a enter y el evento se lanzará para el elemento seleccionado.
El evento que necesitamos depende de como esté programado el elemento, lo mejor es ir probando (casi siempre es "mouseover" o "mouseenter")
En ocasiones al hacer el Copy JS path puede ser que se copie un selector demasiado genérico y no seleccione el elemento que queremos, en dichos casos podemos simplemente editar el elemento que queremos y asignarle una clase personalizada, y a continuación usar el querySelector para seleccionar esa clase única que tendra solo dicho elemento:
document.querySelector(".mi-clase-unica").dispatchEvent(new MouseEvent('mouseover', { 'bubbles': true }));
Notas
Tanto para el hover del css como para los eventos javascript a veces puede ser que no funcionen porque lo estamos usando contra el elemento equivocado, es recomendable a veces coger algunas de las etiquetas que envuelven al propio elemento o incluso alguna de las etiquetas anidadas porque a veces es ahí donde está configurado el evento.